<template>
  <div class="main">
    <div class="chart-container">
      <div ref="upperChartContainer" class="upper-chart"></div>
      <div ref="lowerChartContainer" class="lower-chart"></div>
    </div>
    <div class="table">{{ tableData }}</div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from "vue";
import * as echarts from "echarts";
import jiangxi from "@/assets/jiangxi.json";
const points = ref([
  // 散点图数据
  {
    name: "江西师范大学",
    value: [115.923027, 28.677068],
    itemStyle: { color: "green" },
  }, // 江西师范大学
  {
    name: "安义",
    value: [115.555441, 28.850794],
    itemStyle: { color: "#000" },
  }, // 安义
  {
    name: "兴国",
    value: [115.36319, 26.337937],
    itemStyle: { color: "red" },
  }, // 兴国
]);
const linesData = ref([]);
const planePath = // 飞机svg
  "path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z";

const mapData: any = jiangxi;
const upperChartContainer = ref<HTMLElement | null>(null);
const lowerChartContainer = ref<HTMLElement | null>(null);
let upperChart: echarts.ECharts | null = null;
let lowerChart: echarts.ECharts | null = null;

onMounted(() => {
  upperChart = echarts.init(upperChartContainer.value!);
  lowerChart = echarts.init(lowerChartContainer.value!);
  initUpperChart();
  initLowerChart();
  addClickEventListener();
});

onBeforeUnmount(() => {
  if (upperChart) {
    upperChart.dispose();
    upperChart = null;
  }
  if (lowerChart) {
    lowerChart.dispose();
    lowerChart = null;
  }
});

function initUpperChart() {
  echarts.registerMap("jiangxi", mapData);

  const option: echarts.EChartsOption = {
    backgroundColor: "transparent",
    series: [
      {
        type: "map",
        map: "jiangxi",
        roam: false,
        emphasis: {
          label: {
            show: true,
          },
        },
        itemStyle: {
          areaColor: "#0e2152", // 上层地图颜色
        },
        data: [],
      },
    ],
  };

  if (upperChart) {
    upperChart.setOption(option);
  }
}

function initLowerChart() {
  echarts.registerMap("jiangxi", mapData);

  const option = {
    backgroundColor: "transparent", // 背景颜色
    geo: {
      // 地图配置
      map: "jiangxi",
      label: {
        // 图形上的文本标签
        normal: {
          // 通常状态下的样式
          show: true,
          textStyle: {
            color: "#000",
          },
        },
        emphasis: {
          // 鼠标放上去高亮的样式
          textStyle: {
            color: "#000",
          },
        },
      },
      itemStyle: {
        // 地图区域的样式设置
        normal: {
          // 通常状态下的样式
          borderColor: "#000",
          borderWidth: 1,
          areaColor: {
            //地图区域的颜色
            type: "radial", // 径向渐变
            x: 0.5, // 圆心
            y: 0.5, // 圆心
            r: 0.8, // 半径
            colorStops: [
              {
                // 0% 处的颜色
                offset: 0,
                color: "#fff",
              },
              {
                // 100% 处的颜色
                offset: 1,
                color: "#fff",
              },
            ],
          },
        },
        // 鼠标放上去高亮的样式
        emphasis: {
          areaColor: "#f1f1f1",
          borderWidth: 1,
        },
      },
    },
    tooltip: {
      trigger: "item",
      formatter: (params: any) => {
        // const { name, center, centroid } = params;
        return `地区名称: ${params.name}<br/>ID: ${params.dataIndex}`;
      },
    },
    series: [
      {
        // 散点系列数据
        type: "effectScatter", // 带有涟漪特效动画的散点（气泡）图
        coordinateSystem: "geo", //该系列使用的坐标系:地理坐标系
        // 特效类型,目前只支持涟漪特效'ripple'，意为“涟漪”
        effectType: "ripple",
        // 配置何时显示特效。可选'render'和'emphasis' 。
        showEffectOn: "render",
        rippleEffect: {
          // 涟漪特效相关配置。
          period: 2, // 动画的周期，秒数。
          scale: 6, // 动画中波纹的最大缩放比例。
          // 波纹的绘制方式，可选 'stroke' 和 'fill'。
          brushType: "stroke",
        },
        zlevel: 0.5, // 所有图形的 zlevel 值。
        data: points.value,
      },
      {
        // 线条系列数据
        type: "lines",
        zlevel: 2,
        symbol: ["none", "arrow"], // 标记的图形: 箭头
        symbolSize: 10, // 标记的大小
        effect: {
          // 线条特效的配置
          show: true,
          period: 6, // 特效动画的时间，单位s
          trailLength: 0, // 特效尾迹的长度。取值[0,1]值越大，尾迹越重
          symbol: planePath, // 特效图形的标记 可选'circle'等
          symbolSize: 15, // 特效标记的大小
        },
        lineStyle: {
          // 线条样式
          color: "#93EBF8",
          width: 2.5, // 线条宽度
          opacity: 0.6, // 尾迹线条透明度
          curveness: 0.2, // 尾迹线条曲直度
        },
        data: linesData.value,
      },
    ],
  };

  if (lowerChart) {
    lowerChart.setOption(option);
  }
}

// const data: any = [
//   {
//     name: "南昌市",
//     value: 1,
//   },
//   {
//     name: "景德镇市",
//     value: 2,
//   },
//   {
//     name: "萍乡市",
//     value: 3,
//   },
//   {
//     name: "九江市",
//     value: 4,
//   },
//   {
//     name: "新余市",
//     value: 5,
//   },
//   {
//     name: "鹰潭市",
//     value: 6,
//   },
//   {
//     name: "赣州市",
//     value: 7,
//   },
//   {
//     name: "吉安市",
//     value: 8,
//   },
//   {
//     name: "宜春市",
//     value: 9,
//   },
//   {
//     name: "抚州市",
//     value: 10,
//   },
// ];

const tableData: any = ref("南昌市");
function addClickEventListener() {
  if (lowerChart) {
    lowerChart.on("click", (params: any) => {
      if (params.name) {
        // console.log("点击了上层地图区域：" + params.name);
        tableData.value = params.name;
        // 根据params.name请求数据，渲染到 table
        // ...
      }
    });
  }
}
</script>

<style scoped>
.main {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.chart-container {
  width: 100%;
  height: 800px;
}

.upper-chart {
  width: 100%;
  height: 100vh; /* 总高度为 800 像素，上下距离为 50 像素，因此上层地图高度为 750 像素 */
}

.lower-chart {
  width: 100%;
  height: 100vh;
  background-color: transparent;
  transform: translateY(-101vh) translateX(-10px);
}

.table {
  width: 400px;
  height: 600px;
  background-color: green;
  color: white;
  font-weight: bold;
  font-size: 30px;
  text-align: center;
  padding: 40px;
}
</style>
